<template >
  <div>
    <!-- 首页布局 -->
    <!-- 搜索栏部分 -->
    <van-sticky :offset-top="0">
      <div class="header">
        <van-icon name="chat-o" class="icon-one" />
        <van-search
          placeholder="请输入搜索关键词"
          class="sousuo"
          @click="search"
        />
        <van-icon name="scan" class="icon-two" />
      </div>
    </van-sticky>
    <!-- tab栏 -->
    <van-tabs
      sticky
      :offset-top="45"
      v-model="active"
      swipeable
      animated
      @click="onClick"
      @change="changeIndex"
    >
      <!-- 加载中请稍后的样式 -->
      <load :Load="load"></load>
      <!-- <p  style="text-align:center">加载中，请稍后......</p> -->

      <!-- van-tab标签栏布局 -->
      <van-tab v-for="(item, index) in list" :key="index" :title="item.name">
        <!-- 外层嵌套一个盒子 -->
        <!-- {{newsItems[index].forward }} -->
        <div v-if="newsItems[index].list.length > 0">
          <!-- 判断每一页是否有数据，没有则返回暂无数据 -->
          <div
            v-for="(newss, itew) in newsItems[index].list"
            :key="itew"
            ref="aa"
            class="section"
          >
            <!-- 轮播图 -->
            <lun-bo :newss="newss" v-if="newss.type === 'swiper'"></lun-bo>
            <!-- 金刚区  -->
            <sw-ipe :pages="pages" v-if="newss.type === 'indexnavs'"></sw-ipe>
            <!-- 每日精选 -->
            <titimg :titimg="newss"></titimg>
            <!-- 一图广告 -->
            <hot
              :hot="newss"
              :img="require('../images/demo/search-banner.png')"
            ></hot>
            <list-nav
              v-if="newss.type === 'list'"
              :list="newss.data"
            ></list-nav>
          </div>
        </div>
        <!-- 页面加载 -->
        <div class="loading" v-else-if="newsItems[index].forward === 'before'">
          加载中。。。。
        </div>
        <div class="loading" v-else>暂无数据</div>
      </van-tab>
    </van-tabs>

    <tabbbar></tabbbar>
    <!-- </van-pull-refresh> -->
  </div>
</template>

<script>
import Hot from "../components/hot.vue";
import ListNav from "../components/list-nav.vue";
import Load from "../components/Load.vue";
import LunBo from "../components/lun-bo.vue";
import SwIpe from "../components/sw-ipe.vue";
import Tabbbar from "../components/tabbbar.vue";
import Titimg from "../components/titimg.vue";

export default {
  components: { LunBo, SwIpe, Titimg, Hot, ListNav, Tabbbar, Load },
  name: "Index",
  data() {
    return {
      active: 0, // 样式
      currentIndex: 0, // 索引
      list: [], // 数据
      newsItems: [],
      news: [],
      // 轮播图
      image: [],
      newsData: {},
      name: [], // 获取每页的数组个数
      load: true, // 状态
    };
  },
  mounted() {
    this.PageIndex();
  },
  methods: {
    search() {
      this.$router.push("/search");
    },
    // 滑动时判断一下即可
    changeIndex(index) {
      console.log(index);
      this.currentIndex = index;
      if (this.newsItems[this.currentIndex].forward === "after") {  // 如果他的状态为after，也就是0，就不执行此段代码，如果不是首页那么就去请求对应的数据
        return;
      } else {
        this.Page();
      }
    },
    // tab栏点击事件
    onClick(name, title) {
      console.log(title);

      console.log(this.newsItems[name].forward);
      if (this.newsItems[name].forward === "after") {  // 如果他的状态为after，也就是0，就不执行此段代码，如果不是首页那么就去请求对应的数据
        return;
      } else {
        this.Page();
      }
      // const btn = 1;
      /*       if (name != 0) {
        this.$axios.get(`/index_category/${name}/data/${btn}`).then((v) => {
          console.log(v);
        });
      } */
    },
    Page() {
      // 传索引值
      var index = this.currentIndex;
      // 传分页数据的id值
      var id = this.list[index].id;
      console.log(id);
      let obj = this.newsItems[index];
      console.log(obj.list);
      var page = Math.ceil(obj.list.length / 5) + 1;
      // console.log(id);
      // console.log(page);
      // console.log(obj); //obj获取到after以及before
      obj.forward = "before";
      console.log(obj.forward);
      this.$axios.get(`/index_category/${id}/data/${page}`).then((v) => {
        this.load = false;
        console.log(v);
        obj.forward = "after";
        // console.log(obj.forward);
        var data = v.data.data;
        obj.list = [...obj.list, ...data];
        console.log(obj.list);
      });
    },
    PageIndex() {
      this.$axios.get("index_category/data").then((v) => {
        this.load = false; // 请求到数据后加载中就消失
        console.log(v);
        this.list = v.data.data.category;
        let arr = [];
        for (let i = 0; i < this.list.length; i++) {
          // 遍历整个索引
          // console.log(i);
          let forward = i === 0 ? "after" : "before"; // 判断当前索引是否为0，不为则跳转before
          // console.log(forward);
          var obj = {
            list: [],
            forward: forward,
          };
          // console.log(obj);
          if (i === 0) {
            obj.list = v.data.data.data; // 将首页数据放在obj中的list列表里
          }
          arr.push(obj);
          // console.log(arr);
        }
        this.newsItems = arr;
        // console.log(this.newsItems);
        // console.log(this.newsItems[this.currentIndex].list);
        this.name = this.newsItems[this.currentIndex].list; // 获取list列表中的数组
        // console.log(this.name); // (5) [{…}, {…}, {…}, {…}, {…}, __ob__: Observer]
        // this.name.forEach((v) => {
        //   // console.log(typeof v);
        //   if (v.type == "swiper") {
        //     // console.log(v.data);
        //     Object.values(v.data).forEach((res) => {
        //       // console.log(res);
        //     });
        //   }
        // });
        // 类数组对象
        /*         this.news = v.data.data.data;
        let images = Object.keys(this.news).map((key) => {
          return this.news[key];
        });
        this.news = images;
        console.log(this.news); */
      });
    },
  },
  computed: {
    // 核心！！把金刚区放入两个数组中进行遍历循环
    pages() {
      var pagge = [];
      var index = this.currentIndex;
      if (this.newsItems[index]) {
        this.newsItems[index].list.forEach((v) => {
          if (v.type === "indexnavs") {
            // Object.values()方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历属性的键值。
            var navsdata = Object.values(v.data);
            // console.logs(navsdata); // 一个数组
            navsdata.forEach((item, index) => {
              var page = Math.floor(index / 8);
              // console.log(pagge[page]);
              if (!pagge[page]) {
                pagge[page] = [];
              }
              pagge[page].push(item);
              // console.log(pagge[page]);
            });
          }
        });
      }
      return pagge;
    },
  },

  updated() {
    // 计算中间高度
    var aa = this.$refs.aa;

    var bb = document.documentElement.clientHeight - 135 + "px";
    aa = bb;
  },
};
</script>

<style scoped>
.header {
  background-color: #fff;
  width: 100%;
  height: 45px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.section {
  /* width: 100%; */
  overflow: auto;
}
.icon-one {
  margin-left: 0.133333rem;
  font-size: 24px;
  /* width: 7%; */
}
.sousuo {
  width: 86%;
}
.van-search {
  padding: 0.133333rem;
}
.icon-two {
  font-size: 24px;
  width: 7%;
  margin-left: 0.133333rem;
}
.van-tabbar {
  width: 100%;
  height: 1.2rem;
}

/* .img {
  width: 50%;
} */
.van-tabbar {
  height: 50px;
  display: flex;
  bottom: 0;
}
.loading {
  text-align: center;
  color: black;
  font-size: 16px;
}
::v-deep .van-tabs__line {
  background-color: #ff6600;
}
::v-deep .van-tab--active {
  color: #ff6600;
  font-weight: 700;
}

/* 轮播样式 */
img {
  width: 100%;
  height: 4.8rem;
}
/* 加载中样式 */
.loading {
  text-align: center;
  margin: 15px 0 0 0;
  color: #aaa;
  font-size: 16px;
}
</style>